import React from "react";

class UEditor extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            loaded: false
        };
    }

    componentDidMount() {
        //设置window变量，保证只加载一次JS
        if (window.ueditorLoaded === undefined || window.ueditorLoaded === null) {
            window.ueditorLoaded = false;
            window.UEDITOR_HOME_URL = window.config.baseURL + 'vendor/ueditor/';
            //加载JS
            const promises = [];
            let loadConfig = new Promise((resolve)=> {
                $.getScript(window.config.baseURL + 'vendor/ueditor/ueditor.config.js', resolve);
            });
            let loadMain = new Promise((resolve)=> {
                $.getScript(window.config.baseURL + 'vendor/ueditor/ueditor.all.min.js', resolve);
            });

            promises.push(loadConfig, loadMain);

            Promise.all(promises).then(()=> {
                window.ueditorLoaded = true;
                console.log('ueditor js loaded');
                $(document).trigger('ueditorLoaded')
            });
        } else if (window.ueditorLoaded) {
            $(document).trigger('ueditorLoaded')
        }

        $(document).on('ueditorLoaded', ()=> {
            //初始化编辑器
            this.ueditor = UE.getEditor('ueditor-' + this.props.name, {
                toolbars: [
                    [
                        'fontsize', '|',
                        'blockquote', 'horizontal', '|',
                        'removeformat', '|',
                        'insertimage', '|',
                        'bold', 'italic', 'underline', 'forecolor', 'backcolor', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'insertorderedlist', 'insertunorderedlist', '|',
                        'link', 'unlink', '|',
                        'emotion'
                    ]
                ],
                initialFrameHeight: this.props.height
            });

            this.ueditor.ready(()=> {
                this.setState({loaded: true});
                if (this.props.content) {
                    this.ueditor.setContent(this.props.content);
                }
                this.ueditor.addListener('contentChange', ()=> {
                    this.props.onContentChange(this.ueditor.getContent());
                });
            });
        });
    }

    componentWillUnmount() {
        this.ueditor && this.ueditor.destroy();
        this.ueditor = null;
        $(document).off('ueditorLoaded');
        window.ueditorLoaded = null;
        //删除dom元素
        $('script').each(function () {
            this.src.indexOf('ueditor') !== -1 && $(this).remove();
        });
        $('link').each(function () {
            this.href.indexOf('ueditor') !== -1 && $(this).remove();
        });
    }

    render() {
        return (
            <div className="common-ueditor" style={{minHeight:this.props.height+'px'}}>
                <div id={'ueditor-'+this.props.name}></div>
            </div>
        )
    }
}

UEditor.propTypes = {
    name: React.PropTypes.string.isRequired,
    height: React.PropTypes.number,
    content: React.PropTypes.string,
    onContentChange: React.PropTypes.func.isRequired
};

UEditor.defaultProps = {
    height: 200,
    content: ''
};

export default UEditor;